<template>
	<div class="mine">
		<div class="box">
			<div class="hearderBox">
				<div class="hearderBoxIcon" @click="goBack">
					<img src="../../assets/images/fanhuijiantou.png" alt="">
				</div>
				{{$t('indexTitle.title31')}}
				<div class="vipjilu" @click="getShowLook" v-if="isShowLook">
					<img src="../../assets/images/chaxun.png" alt="">
				</div>
			</div>
			<div class="proList" v-if="!isShowLook">
				<div class="dfafaTimeBoxTow">
					<div class="magBoxTow">
						<div class="input-block"><label for="password">{{$t('indexTitle.title113')}}</label>
							<select v-model="value" @change="changeselect(value)">
								<option :value="item.id" v-for="(item,index) in game" :key="index">{{item.api_title}}
								</option>
							</select>
						</div>
					</div>
					<!-- <div class="magBoxTow">
						<div class="input-block"><label for="password">状态</label>
							<select>
								<option value="0">全部</option>
								<option value="1">已结算</option>
								<option value="2">进行中</option>
								<option value="3">系统撤单</option>
								<option value="4">拒绝</option>
								<option value="5">作废</option>
								<option value="6">玩家取消</option>
							</select>
						</div>
					</div> -->
				</div>
				<div class="dfafaTimeBox">
					<div class="magBox">
						<div class="input-block"><label for="password">{{$t('indexTitle.title101')}}</label>
							<input type="date" v-model="startTime">
						</div>
					</div>
					<div class="magBox">
						<div class="input-block"><label for="password"></label>
							<input type="time" v-model="startTimesfm" step="1">
						</div>
					</div>
					<div class="magBox">
						<div class="input-block"><label for="password">{{$t('indexTitle.title102')}}</label>
							<input type="date" v-model="endTime">
						</div>
					</div>
					<div class="magBox">
						<div class="input-block"><label for="password"></label>
							<input type="time" v-model="endTimesfm" step="1">
						</div>
					</div>
				</div>
				<div class="zhuyiBox">
					<img src="../../assets/images/zhuyi.png" alt="">
					{{$t('indexTitle.title103')}}
				</div>
				<div class="btnssss" @click="getShowLook">{{$t('indexTitle.title104')}}</div>
			</div>
			<div class="proList" v-if="isShowLook">
				<div class="adsfListTowss" :class="{adsfListThree:isShowList}">
					<div class="adsfList">
						<div class="adsfListL">
							{{$t('indexTitle.title114')}}
						</div>
						<div class="adsfListR">
							{{selectgame.api_title}}
						</div>
					</div>
					<div class="adsfList">
						<div class="adsfListL">
							{{$t('indexTitle.title115')}}
						</div>
						<div class="adsfListR">
							{{startTime}} {{startTimesfm}} ~ {{endTime}} {{endTimesfm}}
						</div>
					</div>
					<div class="adsfList">
						<div class="adsfListL">
							{{$t('indexTitle.title116')}}
						</div>
						<div class="adsfListR">
							{{gamerecord.zongtouzhu}}
						</div>
					</div>
					<div class="adsfList">
						<div class="adsfListL">
							{{$t('indexTitle.title117')}}
						</div>
						<div class="adsfListR">
							{{gamerecord.zongyouxiaotouzhu}}
						</div>
					</div>
					<div class="adsfList">
						<div class="adsfListL">
							{{$t('indexTitle.title118')}}
						</div>
						<div class="adsfListR adsfListRTRow">
							{{gamerecord.zongshuying}}
						</div>
					</div>
				</div>
				<div class="adfadf">
					<img src="../../assets/images/rightTow.png" alt="" @click="getSHowList" class="jiantouBox"
						:class="{jiantouBoxTow:isShowList}">
				</div>
				<div class="scollBox" v-if="gamerecord.list.data.length > 0" style="overflow:scroll;"
					:style="[{height:!isShowList?'calc(100vh - 360px)':'calc(100vh - 120px)'}]">
					<div class="dafadBopx" v-for="(it,index) in gamerecord.list.data" :key="index">
						<div class="jiaqianBox">
							<div class="jiaqianBoxL">
								<div class="jiaqianBoxIt">
									<div class="jiaqianBoxItL">
										{{it.betTime}}
									</div>
									<div class="jiaqianBoxItR">
										{{$t('indexTitle.title119')}}
									</div>
								</div>
								<div class="jiaqianBoxItThreeLd">
									{{selectgame.api_name}}
								</div>
								<div class="jiaqianBoxItThree">
									<div class="jiaqianBoxItTow" v-if="selectgame.id!=0">
										{{selectgame.api_title}}
									</div>
									<div class="jiaqianBoxItTow" v-if="selectgame.id==0">
										{{it.gamename}}
									</div>
									<div class="jiaqianBoxItThreeR" v-if="it.netAmount >= 0">
										{{it.netAmount}}
									</div>
									<div class="jiaqianBoxItThreeR jiaqianBoxItThreeRTow" v-if="it.netAmount < 0">
										{{it.netAmount}}
									</div>
								</div>
								<div class="jiaqianBoxItThreeL">
									{{$t('indexTitle.title120')}} {{it.betAmount}}
								</div>
							</div>
							<div class="jiaqianBoxR">
								<img src="../../assets/images/right.png" alt="">
							</div>
						</div>
						<div class="gengduoBox">
							<div class="">
								{{$t('indexTitle.title121')}}
							</div>
							<div class="">
								{{it.billNo}}
							</div>
						</div>
					</div>
				</div>
				<div class="zanwujiluBox" v-else>
					{{$t('indexTitle.title122')}}
				</div>
			</div>
		</div>
		<div class="jiazaidonghua" v-if="isloadingTowShow">
			<img src="../../assets/img/loading-ani.svg" alt="" />
		</div>
		<!-- <div class="buttons">
			<img src="../../assets/images/xiaoxi.png" alt="" />
		</div> -->
		<loadingFour :msgText="msgTextTow" v-if="isShowLoadingTeow" @closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>

<script>
	import {
		getgamelist,
		getgamerecordlist
	} from "../../utils/api.js"
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		components: {
			loadingFour
		},
		data() {
			return {
				isJIfenShow: false,
				isShowLook: false,
				isShowList: false,
				startTime: "",
				endTime: "",
				startTimesfm: "",
				endTimesfm: "",

				game: [{
					'api_title': this.$t('indexTitle.title227'),
					'id': 0,
				}],
				selectgame: [],
				value: 0,
				page: 1,
				gamerecord: [],
				isloadingTowShow: false,
				msgTextTow: "",
				isShowLoadingTeow: false
			}
		},
		created() {},
		mounted() {
			var getTime = new Date().getTime(); //获取到当前时间戳
			var time = new Date(getTime); //创建一个日期对象
			this.nowDate(time);
			this.gamelist()
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			nowDate(time) {
				var year = time.getFullYear(); // 年
				var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
				var date = time.getDate().toString().padStart(2, '0'); // 日
				var shi = time.getHours().toString().padStart(2, '0'); // 日
				var fen = time.getMinutes().toString().padStart(2, '0'); // 日
				var miao = time.getSeconds().toString().padStart(2, '0'); // 日
				this.startTime = year + "-" + month + "-" + date;
				this.startTimesfm = "00" + ":" + "00" + ":" + "00";
				this.endTime = year + "-" + month + "-" + date;
				this.endTimesfm = "23" + ":" + "59" + ":" + "59";
			},
			gamelist() {
				this.isloadingTowShow = true;
				getgamelist().then((res) => {
					if (res.status.errorCode == 0) {
						this.game = [...this.game, ...res.data]
						this.selectgame = this.game[0]
						this.value = this.game[0].id
						console.log(this.value, this.selectgame);
						this.isloadingTowShow = false;
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
					this.isloadingTowShow = false;
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			changeselect(e) {
				console.log(e);
				for (let i = 0; i < this.game.length; i++) {
					if (e == this.game[i].id) {
						this.selectgame = this.game[i]
					}
				}
			},
			getgamerecord() {
				let data = {
					page: this.page,
					start_time: this.startTime + this.startTimesfm,
					end_time: this.endTime + this.endTimesfm
				}
				getgamerecordlist(data).then((res) => {
					if (res.status.errorCode == 0) {
						this.isShowLook = !this.isShowLook;
						this.gamerecord = res.data
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
					this.isloadingTowShow = false;
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			getShowJifen() {
				this.isJIfenShow = !this.isJIfenShow;
			},
			getSHowList() {
				this.isShowList = !this.isShowList;
			},
			goNextPage(page) {
				this.$router.push(page)
			},
			getShowLook() {
				this.$router.push({
					path: '/game-historyTow',
					query: {
						page: this.page,
						startTime: this.startTime,
						startTimesfm: this.startTimesfm,
						endTime: this.endTime,
						endTimesfm: this.endTimesfm,
					}
				})
				// this.isloadingTowShow = true;
				// this.getgamerecord()
			},
			goBack() {
				this.$router.push('/mine')
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.mine {
		height: 90vh;
		overflow-y: auto;
		overflow-x: hidden;
		padding-top: calc(constant(safe-area-inset-top) + 0px);
		padding-top: calc(env(safe-area-inset-top) + 0px);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 85px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 85px);
		box-sizing: border-box;
		position: fixed;
		z-index: 1;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}

	.box {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		/* min-height: 100vh; */
	}

	.buttons {
		position: fixed;
		bottom: 10%;
		right: 10px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buttons img {
		width: 32px;
		height: 32px;
	}


	.hearderBox {
		width: 100%;
		height: 45px;
		background-color: #fff;
		position: fixed;
		top: 0;
		font-weight: 300;
		line-height: 45px;
		text-align: center;
		font-size: 20px;
		color: #545658;
		box-shadow: inset 0 -1px 0 #ececec;
		left: 0;
		overflow: hidden;
		z-index: 99;
	}

	.hearderBoxIcon {
		width: 50px;
		position: fixed;
		top: 3px;
		left: 0px;
	}

	.hearderBoxIcon img {
		width: 20px;
		height: 20px;
	}

	.proList {
		width: 100%;
		padding: 0px 15px 10px;
		margin-top: 50px;
	}

	.adsfListTowss {
		max-height: 500px;
		overflow-y: hidden;
		transition: max-height .5s ease;
	}

	.adsfListThree {
		max-height: 0px;
	}

	.adsfList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		padding: 0px 15px;
		height: 27px;
		border-bottom: 1px solid #e9e9e9;
	}

	.adsfListTow {
		border-bottom: none;
	}

	.adsfListL {
		color: #939698;
	}

	.adsfListR {
		color: #545658;
		font-weight: 500;
	}

	.adsfListRTRow {
		color: #e94951;
	}

	.scollBox {
		width: 100%;
		overflow-y: scroll;
	}

	.dafadBopx {
		width: 100%;
		margin-top: 10px;
	}

	.jiaqianBox {
		width: 100%;
		height: 110px;
		padding: 12px 15px 5px;
		border: 1px solid #ececec;
		background: #fafafc;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 5px 5px 0px 0px;
	}

	.jiaqianBoxL {
		width: 95%;
	}

	.jiaqianBoxR {
		width: 5%;
	}

	.jiaqianBoxR img {
		width: 30px;
		height: 30px;
	}

	.jiaqianBoxIt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.jiaqianBoxItL {
		color: #939698;
		font-size: 12px;
		line-height: 1;
		opacity: 0.8;
	}

	.jiaqianBoxItR {
		background-color: #e7e7e7;
		border-radius: 2px;
		color: #939698;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		padding: 0 10px;
		text-align: center;
		white-space: nowrap;
		width: 90px;
	}

	.jiaqianBoxItTow {
		font-size: 16px;
		color: #545658;
	}

	.jiaqianBoxItThree {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.jiaqianBoxItThreeL {
		color: #939698;
		font-size: 12px;
		line-height: 1;
		opacity: 0.8;
		margin-bottom: 8px;
	}

	.jiaqianBoxItThreeLd {
		color: #545658;
		font-size: 12px;
		line-height: 1;
		opacity: 0.8;
		margin-bottom: 3px;
	}

	.jiaqianBoxItThreeR {
		color: #9ac143;
		font-weight: 500;
		font-size: 20px;
	}

	.jiaqianBoxItThreeRTow {
		color: #e94951;
	}

	.vipjilu {
		position: fixed;
		top: 3px;
		right: 10px;
	}

	.vipjilu img {
		width: 25px;
		height: 25px;
	}

	.gengduoBox {
		background-color: #ba9979;
		color: #fff;
		cursor: pointer;
		font-size: 12px;
		padding: 8px 15px;
		text-align: center;
		display: flex;
		justify-content: space-between;
		border-radius: 0px 0px 5px 5px;
	}

	.adfadf {
		width: 100%;
		text-align: center;
		margin: 10px 0;
	}

	.jiantouBox {
		width: 25px;
		height: 25px;
		transform: rotate(90deg);
	}

	.jiantouBoxTow {
		width: 25px;
		height: 25px;
		transform: rotate(270deg);
	}

	.beizhuBoxR img {
		width: 20px;
		height: 20px;
	}

	.gengduoBoxTow {
		display: block;
	}

	.dfafaTimeBox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.dfafaTimeBoxTow {
		width: 100%;
	}

	.magBoxTow {
		width: 100%;
		border-radius: 5px;
		box-sizing: border-box;
		display: flex;
		height: 54px;
		justify-content: space-around;
		padding: 0 10px;
		margin: 10px auto 0;
		background-color: #fbfbfb;
		border: 1px solid #e9e9e9;
		color: #777;
		font-weight: 300;
	}

	.magBox {
		width: 49%;
		border-radius: 5px;
		box-sizing: border-box;
		display: flex;
		height: 54px;
		justify-content: space-around;
		padding: 0 10px;
		margin: 10px auto 0;
		background-color: #fbfbfb;
		border: 1px solid #e9e9e9;
		color: #777;
		font-weight: 300;
	}

	.input-block {
		box-sizing: border-box;
		position: relative;
		width: 100%;
	}

	.input-block label {
		color: #a0a3a5;
		line-height: 1.29;
		pointer-events: none;
		position: absolute;
		font-size: 10px !important;
		top: 8px !important;
		font-weight: 300;
	}

	.input-block input {
		background-color: transparent;
		color: #545658;
		border: none !important;
		box-sizing: border-box;
		position: absolute;
		width: 100%;
		outline: medium;
		padding: 0;
		font-size: 14px !important;
		font-family: sans-serif;
		font-size: 100%;
		line-height: 1.15;
		margin: 0;
		height: 28px !important;
		box-shadow: none !important;
		top: 24px !important;
	}

	.input-block select {
		background-color: transparent;
		color: #545658;
		border: none !important;
		box-sizing: border-box;
		position: absolute;
		width: 100%;
		outline: medium;
		padding: 0;
		font-size: 14px !important;
		font-family: sans-serif;
		font-size: 100%;
		line-height: 1.15;
		margin: 0;
		height: 28px !important;
		box-shadow: none !important;
		top: 24px !important;
	}

	.zhuyiBox img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.zhuyiBox {
		display: flex;
		font-size: 12px;
		margin: 5px auto 10px;
		color: #86898c;
		font-weight: 300;
		width: 95%;
	}

	.btnssss {
		background-color: #7240ff;
		border: none;
		border-radius: 3px;
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 44px;
		width: 100%;
		margin: 20px auto 0;
		text-align: center;
		line-height: 44px;
	}

	.zanwujiluBox {
		width: 100%;
		height: calc(100vh - 238px);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		opacity: .6;
		color: #545658;
		font-weight: 300;
	}

	.jiazaidonghua {
		height: 100px;
		width: 100px;
		background-color: #313131;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
	}

	.jiazaidonghua img {
		height: 45px;
		width: 45px;
	}
</style>